<template >
      <!-- 安防告警统计 -->
      <div class="data">
        <div class="war_number">
          <div class="number-sum"> 
            <div class="number-sum_75">
            </div>
            <div class="number-sum_50">
                <p>55</p>
                <b>总数</b>
            </div>
          </div>
          <div class="number-data">
            <ul  class="data_state_list">
              <li>
                <p>25</p>
                <b>待确认</b>
              </li>
              <li>
                <p>30</p>
                <b>已确认</b>
              </li>
            </ul>
            <i class="icon_separate"></i>
            <ul class="data_state_type">
              <li>
                <p>6</p>
                <b>告警</b>
              </li>
              <li>
                <p>0</p>
                <b>误报</b>
              </li>
              <li>
                <p>19</p>
                <b>测试</b>
              </li>
            </ul>
          </div>
        </div>
        <ul class="war_type">
            <li >
              <p>
                视频监控告警
                <b>3</b>
                /
                <span>1</span>
              </p>
            </li>
            <li >
              <p>
                电子围栏告警
                <b>3</b>
                /
                <span>1</span>
              </p>
            </li>
            <li >
              <p>
                红外入侵告警
                <b>3</b>
                /
                <span>1</span>
              </p>
            </li>
            <li >
              <p>
                消防告警
                <b>3</b>
                /
                <span>1</span>
              </p>
            </li>
            <li >
              <p>
                门禁告警
                <b>3</b>
                /
                <span>1</span>
              </p>
            </li>
            <li >
              <p>
                电梯告警
                <b>3</b>
                /
                <span>1</span>
              </p>
            </li>
        </ul>
        <div class="war_chart">
          <chart-view class="chart-content" :chart-option="warStatic" :auto-resize="true" height="100%" />
        </div>
      </div>
</template>

<script>
import { gradientCircleLineData } from '../../assets/js/echartData'  //表单数据
export default {
  data() {
    return {
      warStatic:{},
    } 
  },
  created(){
    this.warStatic = this.$eChartFn.gradientCircleLine(gradientCircleLineData);
  },
  methods:{
  },
  activated() {
  },
}
</script>



<style scoped lang="less">
@import '../../../../assets/css/chuShiHua.less';
@img:'/static/img/park/security/';
  .main{
    width: calc((100% - 2vw) * 0.24);
    height: calc(((92% - 2vh)  * 0.95 * 0.48) - 4vh );
    background: #050505;
    margin: 50px;
    padding: 1vh 1vw;
  }

.data{
  .WH();
}

// 旋转圆动画
@keyframes round75 {
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

.war_number{
  .WH(100%,40%);
  display: flex;
  // 左侧图
  .number-sum{
    .WH(45%);
    .backgroundImg('@{img}/round100.webp');
    .displayFlex();
    position: relative;
    .number-sum_75{
      .WH(70%);
      .displayFlex();
      .backgroundImg('@{img}/round75.webp');
      transform:rotate(60deg);
      animation: round75 5s linear infinite;

    }
    .number-sum_50{
        .WH(40%);
        .backgroundImg('@{img}/round50.webp');
        .displayFlex();
        flex-direction: column;
        position: absolute;
        p{
          font-size: 24px;
          font-weight: 500;
          color: #F5FCFF;
        }
        b{
          font-size: 14px;
          font-weight: 400;
          color: #91A9B2;
          line-height: 18px;
        }
    }
  }
  
  // 右侧数据
  .number-data{
    .WH(55%);
  }
  .data_state_list{
      .WH(100%,50%);
      display: flex;
      justify-content: center;
      li{
        .WH(30%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p{
          font-size: 24px;
          font-weight: 400;
          color: #B0E0FF;
          line-height: 28px;
        }
        b{
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 14px;
        }
      }
    }
  .data_state_type{
    .WH(100%,45%);
    display: flex;
    justify-content: center;
    li{
      .WH(20%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    p{
      font-size: 16px;
      font-weight: 400;
      color: #B0E0FF;
    }
    b{
      font-size: 12px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 15px;
    }
  }
}
.war_type{
  .WH(100%,20%);
  display: flex;
  flex-wrap: wrap;
  li{
    .WH(30%,50%);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 400;
    p{
      font-size: 12px;
      color: #FFFFFF;
    }
    b{
      font-size: 16px;
      color: #B0E0FF;
    }
    span{
      font-size: 16px;
      color: #B0E0FF;
    }
  }
}
.war_chart{
  .WH(100%,40%);
}
.icon_separate{
  display: flex;
  width: 100%;
  height: 5%;
  background: url('/static/img/park/security/line.webp') 50% 0% no-repeat ;
  background-size: 100%;
}
</style>